<template>
  <div class="icon" :class="[props.class, `icon-size-${props.size}`]">
    <component :is="component" :style="style" :class="[`icon-size-${props.size}`]"></component>
  </div>
</template>
<script setup>
import { computed, defineAsyncComponent } from 'vue'
import { useIconStore } from '@/store/icon'
import LoadingIcon from '@/components/common/LoadingIcon.vue'

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  class: {
    type: String,
    default: '',
  },
  shadow: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: '16',
  },
})

const style = computed(() => {
  return props.shadow ? { filter: 'drop-shadow(0rem 0rem 0.5rem rgba(0, 0, 0, 0.3))' } : {}
})

const { getModuleLoader } = useIconStore()

const component = computed(() =>
  defineAsyncComponent({
    loader: getModuleLoader(props.name),
    loadingComponent: LoadingIcon,
  }),
)
</script>
<style lang="scss">
.icon {
  display: inline-block;
  line-height: normal;
  text-align: center;
}
</style>
